<template>
  <el-dialog
    :title="readOnly ? '查看' : '编辑'"
    :visible.sync="dialogVisible"
    :show-close="false"
    :modal="false"
    width="636px"
    class="edit-dialog"
    :before-close="handleClose"
  >
    <div class="record-edit-content">
      <div class="record-edit-left">
        <el-upload
          class="avatar-uploader"
          :class="{
            limit:
              (detailsData.imgs && detailsData.imgs.length === 6) || readOnly,
          }"
          list-type="picture-card"
          :action="action"
          :limit="6"
          :disabled="readOnly"
          :file-list="detailsData.images"
          :on-success="handleAvatarSuccess"
          :on-remove="handleOnRemove"
          :before-upload="beforeAvatarUpload"
          ref="file"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="file" slot-scope="{ file }" class="img-box">
            <!-- {{  file}} -->
            <img
              v-if="getFileType(file,'img')"
              class="el-upload-list__item-thumbnail"
              :src="file.response ? file.response.data.image : file.url"
              alt=""
            />
            <img
              v-if="getFileType(file,'zip')"
              class="el-upload-list__item-thumbnail img-diy"
              src="../../index/image/index_zip.jpg"
              alt=""
            />
            <img
              v-if="getFileType(file,'pdf')"
              class="el-upload-list__item-thumbnail img-diy"
              src="../../index/image/index_pdf.jpg"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                v-if="getFileType(file ,'imgpdf')"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="getFileType(file,'zip')"
                class="el-upload-list__item-delete"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </div>
      <div class="record-edit-right">
        <div
          v-for="v in detailsData.content"
          class="index-item-input"
          :key="v.id"
        >
          <span>{{ v.name }}</span>
          <div>
            <el-input
              v-model="v.num"
              :disabled="readOnly"
              type="number"
              class="index-item-num"
            ></el-input>
            <span>份</span>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button
        v-if="!readOnly"
        size="small"
        type="primary"
        @click="handleSubmit"
        >确 定</el-button
      >
    </span>
    <el-dialog :visible.sync="imgVisible" class="edit-dialog preview" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-dialog>
</template>

<script>
// import D2Badge from './components/d2-badge'
import { request } from "@/api/_service.js";

export default {
  components: {},
  props: {
    viewType: {
      type: [String],
      default: "",
    },
    rowId: {
      type: [String, Number],
      default: "",
    },
    dialogVisibles: {
      type: Boolean,
      default: false,
    },
    readOnly: false,
  },
  data() {
    return {
      detailsData: {
        content: [],
        images: [],
        imgs: [],
      },
      dialogVisible: false,
      imgVisible: false,
      dialogImageUrl: '',
      action: process.env.VUE_APP_API + "/mapi/common/uploadFile",
      fileType: [
        "image/jpeg",
        "image/png",
        "application/x-zip-compressed",
        "application/pdf",
      ],
    };
  },
  created() {
    this.dialogVisible = this.dialogVisibles;
    this.readOnly = this.viewType === "view" ? true : false;
  },
  mounted() {
    this.getDetails();
    // console.log(this, 'dialogVisibledialogVisible')
  },
  beforeDestroy() {
    // clearInterval(this.timeInterval)
  },
  methods: {
    getDetails() {
      request({
        url: "/mapi/newspaper/getNewspaperLogDetail",
        method: "post",
        data: {
          id: this.rowId,
        },
      }).then((res) => {
        console.log(res, "/mapi/department/index");
        res.data.imgs = res.data.images.map((val) => val.url);
        this.detailsData = res.data;
        // this.images = res.data.images.map(()=>{
        //   return {
        //     ...v,
        //     name:
        //   }
        // })
      });
    },
    handlePictureCardPreview(file) {
      const type = this.getFileType(file)
      if(type === 'pdf' || type === 'zip') return window.open(file.url)
      this.dialogImageUrl = file.response ? file.response.data.image : file.url;
      this.imgVisible = true;
    },
    handleClose(isTrue) {
      this.$emit("update", isTrue);
      this.dialogVisible = false;
    },
    getFileType(file,fileType){
      let type = ''
      if(file.response){
        type = file.name.split('.').reverse()[0]
      }else{
        type = file.extension
      }
      if(fileType === 'img') return type === 'jpg' || type === 'png'
      else if(fileType === 'zip') return type === 'zip' 
      else if(fileType === 'pdf') return type === 'pdf'
      else if(fileType === 'imgpdf') return type === 'pdf' || type === 'jpg' || type === 'png'
      else if(!fileType) return type
    },
    submitNewspape() {
      const content = {
        images: this.detailsData.imgs,
        item: this.detailsData.content,
      };
      // return console.log(this.detailsData.imgs, "detailsDatadetailsData");
      request({
        url: "/mapi/newspaper/saveNewspaperLogDetail",
        method: "post",
        data: {
          id: this.rowId,
          content: JSON.stringify(content),
        },
      }).then((res) => {
        this.$message.success("编辑成功");
        this.handleClose(true);
      });
    },

    handleSubmit() {
      request({
        url: "/mapi/newspaper/getNewspaperLogDetail",
        method: "post",
        data: {
          id: this.rowId,
        },
      }).then((res) => {
        this.submitNewspape();
      });
    },
    handleAvatarSuccess(res, file, fileList) {
      console.log(res, file, fileList, "res, file,fileList");
      const url = res.data.image;
      this.detailsData.imgs = fileList.map((v) => {
        if (v.response) {
          return v.response.data.image;
        } else {
          return v.url;
        }
      });
    },
    handleRemove(file){
      this.$refs.file.handleRemove(file)
      // const ind = this.detailsData.imgs.findIndex((v)=>v.url === file.url || file.response === v.response)
      // this.detailsData.imgs.splice(ind,1)
      // console.log(ind)
    },
    handleOnRemove(res, fileList) {
      console.log(res, this.detailsData.imgs, "imageimageimage");
      this.detailsData.imgs = fileList.map((v) => {
        if (v.response) {
          return v.response.data.image;
        } else {
          return v.url;
        }
      });
    },
    beforeAvatarUpload(file) {
      // console.log(
      //   file.type,
      //   "----png、jpg、pdf、zippng、jpg、pdf、zippng、jpg、pdf、zip"
      // );
      // const isJPG = file.type === 'image/jpeg';
      console.log(file, "filefilefile");
      const limitType = this.fileType.includes(file.type);
      if (!limitType) {
        this.$message.error("请上传png、jpg、pdf、zip格式的票据!");
      }

      return limitType;
    },
  },
};
</script>

<style lang="scss" scoped>

.img-box{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .img-diy{
    width: 80%;
    height: auto;
  }
}
.edit-dialog {
  &::v-deep .el-dialog {
    box-shadow: 0px 0px 20px 0px #d2dae4;
    border-radius: 20px;
    .el-dialog__header{
      text-align: center;
      font-weight: bold;
    }
  }
  &.preview{
    &::v-deep .el-dialog {
      box-shadow: none;
  }
  }
}

.record-edit-content {
  display: flex;
  justify-content: space-between;
}

.el-button {
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

.record-edit-left {
  width: 274px;
  height: 197px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-sizing: border-box;
  padding: 18px 14px;
  .avatar-uploader {
    min-height: 89px;
    &::v-deep .el-upload--picture-card {
      width: 76px;
      height: 76px;
      line-height: 76px;
      background: #f4f8fb;
    }

    &.limit {
      &::v-deep .el-upload--picture-card {
        display: none;
      }
    }

    &::v-deep .el-upload-list--picture-card {
      .el-upload-list__item {
        width: 76px;
        height: 76px;
      }
      .el-upload-list__item:nth-child(3n) {
        margin-right: 0;
      }
    }

    .el-upload {
      border: 1px dashed #d9d9d9;
      background: #f4f8fb;
      border-radius: 10px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 18px;
      color: #8c939d;
      width: 76px;
      height: 76px;
      line-height: 76px;
      text-align: center;
      font-weight: bold;
    }
  }
}

.record-edit-right {
  flex: 1;
  margin-left: 42px;
  .index-item-input {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    & > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 14px;
        color: #3a3a3a;
        margin-left: 8px;
      }
      .index-item-num {
        &::v-deep .el-input__inner {
          width: 78px;
          height: 25px;
          background: #f4f8fb;
          border-color: #f4f8fb;
        }
      }
    }
  }
}
</style>
